<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>【整理】详说JPG,GIF及PNG各类型的图片格式 - 荒漠千蝶 - 博客园</title>
<link type="text/css" rel="stylesheet" href="/bundles/blog-common.css?v=iQQnf2q8V83bi9LbN6IvkHJyxj8GLI9A8HLPvxO-IBQ1"/>
<link id="MainCss" type="text/css" rel="stylesheet" href="http://common.cnblogs.com/Skins/InsideDotNet/style.css?id=20140415"/>
<link title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/weinan/rss"/>
<link title="RSD" type="application/rsd+xml" rel="EditURI" href="http://www.cnblogs.com/weinan/rsd.xml"/>
<link type="application/wlwmanifest+xml" rel="wlwmanifest" href="http://www.cnblogs.com/weinan/wlwmanifest.xml"/>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>  
<script type="text/javascript">var currentBlogApp = 'weinan', cb_enable_mathjax=false;</script>
<script src="/bundles/blog-common.js?v=15gzXd7pJ_PNpSlGpVykf0EBaNg79HWL7oD5vVw0NGA1" type="text/javascript"></script>
</head>
<body>
<a name="top"></a>

<!--done-->
<div id="home">
<div id="header">
	<div id="blogTitle">
	<div style="display:none"><img src="/Skins/insideDotNet/images/top.gif" alt="谨以此模板祝贺【博客园开发者征途】系列图书《你必须知道的.net》出版发行" /></div>
	<a id="lnkBlogLogo" href="http://www.cnblogs.com/weinan/"><img id="blogLogo" src="/Skins/custom/images/logo.gif" alt="返回主页" /></a>			
		
<!--done-->
<h1><a id="Header1_HeaderTitle" class="headermaintitle" href="http://www.cnblogs.com/weinan/">荒漠千蝶</a></h1>
<h2></h2>



		
	</div><!--end: blogTitle 博客的标题和副标题 -->
	<div id="navigator">
		
<!--done-->
			<ul id="navList">
				<li><a id="MyLinks1_HomeLink" class="menu" href="http://www.cnblogs.com/">博客园</a></li>
				<li><a id="MyLinks1_SpaceLink" class="menu" href="http://space.cnblogs.com/">社区</a></li>
				<li><a id="MyLinks1_MyHomeLink" class="menu" href="http://www.cnblogs.com/weinan/">首页</a></li>
				<li><a id="MyLinks1_NewPostLink" class="menu" rel="nofollow" href="http://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a></li>
				<li><a id="MyLinks1_ContactLink" accesskey="9" class="menu" rel="nofollow" href="http://space.cnblogs.com/msg/send/%e8%8d%92%e6%bc%a0%e5%8d%83%e8%9d%b6">联系</a></li>
				<li><a id="MyLinks1_Admin" class="menu" rel="nofollow" href="http://i.cnblogs.com/">管理</a></li>
				<li>
				</li>
			</ul>


		<div class="clear"></div>
		<div class="blogStats">
			
			
<!--done-->
随笔- 11&nbsp;
文章- 0&nbsp;
评论- 36&nbsp;

			
		</div><!--end: blogStats -->
	</div><!--end: navigator 博客导航栏 -->
</div><!--end: header 头部 -->

<div id="main">
	<div id="mainContent">
	<div class="forFlow">
		

<!--done-->
<div id="topics">
	<div class = "post">
		<h1 class = "postTitle">
			<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/weinan/archive/2012/12/04/2801918.html">【整理】详说JPG,GIF及PNG各类型的图片格式</a>
		</h1>
		<div class="clear"></div>
		<div class="postBody">
			<div id="cnblogs_post_body"><p>大家都知道网页上面的图像一般用jpg、gif和png这几种格式，他们有什么区别，看了下面的内容后你可能会有了自己的结论。</p>
<hr />
<p>&nbsp;</p>
<p><span style="background-color: #993366; color: #ffff00;"><strong>GIF格式特点：</strong></span></p>
<p><strong><span class="pun">透明性</span></strong><br /><span class="typ">Gif</span><span class="pun">是一种布尔透明类型，既它可以是全透明，也可以是全不透明，但是它并没有半透明（</span><span class="pln">alpha </span><span class="pun">透明）。</span><br /><strong><span class="pun">动画</span></strong><br /><span class="typ">Gif</span><span class="pun">这种格式支持动画。</span><br /><strong><span class="pun">无损耗性</span><br /></strong><span class="typ">Gif</span><span class="pun">是一种无损耗的图像格式，这也意味着你可以对</span><span class="pln">gif</span><span class="pun">图片做任何操作也不会使</span><span class="pln">&nbsp; </span><span class="pun">得图像质量产生损耗。</span><br /><strong><span class="pun">水平扫描</span></strong><br /><span class="typ">Gif</span><span class="pun">是使用了一种叫作</span><span class="pln">LZW</span><span class="pun">的算法进行压缩的，当压缩</span><span class="pln">gif</span><span class="pun">的过程中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的</span><span class="pln">gif</span><span class="pun">图片比竖向的</span><span class="pln">gif</span><span class="pun">图片更加小。例如</span><span class="lit">500</span><span class="pun">*</span><span class="lit">10</span><span class="pun">的图片比</span><span class="lit">10</span><span class="pun">*</span><span class="lit">500</span><span class="pun">的图片更加小</span><br /><strong><span class="pun">间隔渐进显示</span></strong><br /><span class="typ">Gif</span><span class="pun">支持可选择性的间隔渐进显示</span></p>
<p><span class="pun"> 由以上特点看出只有</span><span class="lit">256</span><span class="pun">种颜色的</span><span class="pln">gif</span><span class="pun">图片不适合作为照片，它适合做对颜色要求不高的图形。</span></p>
<hr />
<p>&nbsp;</p>
<p><span style="background-color: #993366; color: #ffff00;">
<strong>Jpeg格式特点：</strong></span></p>
<p><strong><span class="pun">透明性</span><br /></strong><span class="pun">它并不支持透明。</span><br /><strong><span class="pun">动画</span></strong><br /><span class="pun">它也不支持动画。</span><br /><strong><span class="pun">损耗性</span><br /></strong><span class="pun">除了一些比如说旋转（仅仅是</span><span class="lit">90</span><span class="pun">、</span><span class="lit">180</span><span class="pun">、</span><span class="lit">270</span><span class="pun">度旋转），裁切，从标准类型到先进类型，编辑图片的原数据之外，所有其它操作对</span><span class="pln">jpeg</span><span class="pun">图像的处理都会使得它的质量损失。所以我们在编辑过程一般用</span><span class="pln">png</span><span class="pun">作为过渡格式。</span><br /><strong><span class="pun">隔行渐进显示</span></strong><br /><span class="pun">它支持隔行渐进显示（但是</span><span class="pln">ie</span><span class="pun">浏览器并不支持这个属性，但是</span><span class="pln">ie</span><span class="pun">会在整个图像信息完全到达的时候显示）。</span></p>
<p><span class="pun">由上可以看出</span><span class="typ">Jpeg</span><span class="pun">是最适</span><span class="pln">web</span><span class="pun">上面的摄影图片和数字照相机中。</span></p>
<hr />
<p>&nbsp;</p>
<p><span style="background-color: #993366; color: #ffff00;">
<strong>Png格式特点：</strong></span></p>
<p><strong><span class="pun">透明性</span><br /></strong><span class="typ">Png</span><span class="pun">是完全支持</span><span class="pln">alpha</span><span class="pun">透明的(透明，半透明，不透明)，尽管有两个怪异的现象在</span><span class="pln">ie6</span><span class="pun">(下面详细讨论)</span><br /><strong><span class="pun">动画</span></strong><br /><span class="pun">它不支持动画</span><br /><strong><span class="pun">无损耗性</span></strong><br /><span class="pln">png</span><span class="pun">是一种无损耗的图像格式，这也意味着你可以对</span><span class="pln">png</span><span class="pun">图片做任何操作也不会使</span><span class="pln">&nbsp; </span><span class="pun">得图像质量产生损耗。这也使得</span><span class="pln">png</span><span class="pun">可以作为</span><span class="pln">jpeg</span><span class="pun">编辑的过渡格式</span><br /><strong><span class="pun">水平扫描</span><br /></strong><span class="pun">像</span><span class="pln">GIF</span><span class="pun">一样，</span><span class="pln">png</span><span class="pun">也是水平扫描的，这样意味着水平重复颜色比垂直重复颜色的图片更小</span><br /><strong><span class="pun">间隔渐进显示</span></strong><br /><span class="pun">它支持间隔渐进显示，但是会造成图片大小变得更大</span></p>
<p><strong>第一种PNG叫PNG8(布尔透明)</strong>,简单说可以理解为静态的GIF<br />他们都只有256色,也支持索引透明,就是指定一个像素点是不是透明</p>
<p><strong>第二种PNG也叫PNG8(Alpha透明)</strong>可指定像素点的透明度,例如50%透明度<br />这种优点在于比PNG24/32体积小,但效果一样<br />缺点在于IE6支持不好,<del></del>会把半透明的像素点显示成全透明</p>
<p><strong>第三种PNG叫PNG24</strong></p>
<p>PNG24不透明,但是颜色数很多,不止256色<br />而Photoshop里导出的png24其实是png32</p>
<p><strong>第四种PNG叫PNG32</strong><br />和photoshop的PSD一样,是Fireworks的默认源文件格式,包含图层和通道信息<br />和PNG24的区别在于多了透明信息<br />缺点在于IE6支持不好,会把透明区域显示成蓝灰底色 : 只能通过影响性能的方法AlphaImageLoader与需要加特殊标签（VML）。</p>
<p><span style="color: #3366ff;"><strong>注</strong>：</span></p>
<p><span style="color: #000000;">布尔透明的png8可以在任一浏览器正常显示（就像gif一样）。</span></p>
<p><span style="color: #000000;">Alpha透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明，其它浏览器都能正常</span></p>
<p><span style="color: #000000;">Photoshop只能导出布尔透明的PNG8。（有些png8在IE6下可能会有毛边，因为像文字，圆角等通常有弱化边缘的效果。可以在导出前进行修剪）</span><br /><span style="color: #000000;">Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8.</span></p>
<hr />
<p>&nbsp;</p>
<p>
<strong>其它图片格式与PNG比较：</strong></p>
<p>众所周知GIF适合图形，JPEG适合照片，PNG系列两种都适合。</p>
<p><strong>相比GIF</strong></p>
<p><span class="pun"><span class="pun">对于相同色值，gif格式图片会比png32<span class="pun"><span class="pun">格式图片</span></span>小。但<span class="pln">png8才</span><span class="pun">是最优的选择。</span></span></span></p>
<p>PNG 8除了不支持动画外，PNG8有GIF所有的特点，但是比GIF更加具有优势的是它支持alpha透明和更优的压缩。所以，大多数情况下，你都应该用PNG8不是GIF（除了非常小的图片GIF会有更好的压缩外）。 </p>
<p><strong>相比JPEG</strong><br />JPEG比全色PNG具有更加好的压缩，因此也使得JPEG适合照片，但是编辑JPEG过程中容易造成质量的损失，所以全色PNG适合作为编辑JPEG的过渡格式.</p>
<p>&nbsp;</p></div><div id="MySignature"></div>
<div class="clear"></div>
<div id="blog_post_info_block">
<div id="blog_post_info">
</div>
<div class="clear"></div>
<div id="post_next_prev"></div>
</div>


		</div>
		<div class = "postDesc">posted @ <span id="post-date">2012-12-04 18:50</span> <a href='http://www.cnblogs.com/weinan/'>荒漠千蝶</a> 阅读(<span id="post_view_count">...</span>) 评论(<span id="post_comment_count">...</span>)  <a href ="http://i.cnblogs.com/EditPosts.aspx?postid=2801918" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(2801918);return false;">收藏</a></div>
	</div>
	<script type="text/javascript">var allowComments=true,isLogined=false,cb_blogId=105192,cb_entryId=2801918,cb_blogApp=currentBlogApp,cb_blogUserGuid='af342b8c-482c-e111-b988-842b2b196315',cb_entryCreatedDate='2012/12/4 18:50:00';loadViewCount(cb_entryId);</script>
	
</div><!--end: topics 文章、评论容器-->
<a name="!comments"></a><div id="blog-comments-placeholder"></div><script type="text/javascript">var commentManager = new blogCommentManager();commentManager.renderComments(0);</script>
<div id="comment_form" class="commentform">
<a name="commentform"></a>
<div id="divCommentShow"></div>
<div id="comment_nav"><span id="span_refresh_tips"></span><a href="javascript:void(0);" id="lnk_RefreshComments" onclick="return RefreshCommentList();">刷新评论</a><a href="#" onclick="return RefreshPage();">刷新页面</a><a href="#top">返回顶部</a></div>
<div id="comment_form_container"></div>
<div class="ad_text_commentbox" id="ad_text_under_commentbox"></div>
<div id="site_nav_under"><a href="http://www.cnblogs.com/" target="_blank" title="程序员的网上家园">博客园首页</a><a href="http://q.cnblogs.com/" target="_blank" title="程序员问答社区">博问</a><a href="http://news.cnblogs.com/" target="_blank" title="IT新闻">新闻</a><a href="http://home.cnblogs.com/ing/" target="_blank">闪存</a><a href="http://job.cnblogs.com/" target="_blank">程序员招聘</a><a href="http://kb.cnblogs.com/" target="_blank">知识库</a></div>
<div id="ad_under_post_holder"></div>
<script type="text/javascript">
var enableGoogleAd = true;
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
fixPostBodyFormat();
loadAdUnderPost();
</script>
<div id="HistoryToday" class="c_ad_block"></div>
<script type="text/javascript">
loadBlogSignature();
LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid);
GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate);
GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);
</script>
<script type="text/javascript">
    $.ajax({ url: 'http://counter.cnblogs.com/blog/post/' + cb_entryId, type: 'get', dataType: 'script', cache: true });
</script>
</div>

	</div><!--end: forFlow -->
	</div><!--end: mainContent 主体内容容器-->

	<div id="sideBar">
		<div id="sideBarMain">
			
<!--done-->
<div class="newsItem">
<h3 class="catListTitle">公告</h3>
	<div id="blog-news"></div><script type="text/javascript">loadBlogNews();</script>
</div>

			<div id="calendar"><div id="blog-calendar" style="display:none"></div><script type="text/javascript">loadBlogDefaultCalendar();</script></div>
			
			<DIV id="leftcontentcontainer">
				<div id="blog-sidecolumn"></div><script type="text/javascript">loadBlogSideColumn();</script>
			</DIV>
			
		</div><!--end: sideBarMain -->
	</div><!--end: sideBar 侧边栏容器 -->
	<div class="clear"></div>
	<div class="clear"></div>
	</div><!--end: main -->
	<div class="clear"></div>
	<div id="footer">
		
<!--done-->
Copyright &copy;2014 荒漠千蝶 谨以此模板祝贺【博客园开发者征途】系列图书之《你必须知道的.NET》出版发行
	</div><!--end: footer -->
</div><!--end: home 自定义的最大容器 -->
</body>
</html>
